<template>
  <div>
    <div style="margin: 3px;">
      <h1 style="font-size: 30px;text-align: center;">回收员信息</h1>
      <el-button style="float: left;" @click="updatePass" type="primary">修改密码</el-button>
      <el-button style="float: left;margin-left: 960px;" @click="updateBtn(recycle)" type="primary">修改回收人信息</el-button>
    </div>
    <!-- 回收员密码 -->
    <div>
      <el-dialog  title="修改密码" :visible.sync="dialogVisible1" width="35%" :before-close="handleClose">
        <el-form ref="pass" :model="pass" label-width="100px">
          <el-form-item label="登录密码">
            <el-input v-model="pass.oldPass"  type="password" ></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="pass.newPass"  type="password" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="pass.notarizePass" show-password></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="passCancel">取 消</el-button>
          <el-button type="primary" @click="passConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 回收员列表 -->
    <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 42px;">
      <el-form ref="recycle" disabled :model="recycle" label-width="100px">
        <el-col :span="11">
          <el-form-item></el-form-item>
          <el-form-item label="回收员账号">
            <el-input v-model="recycle.recycleAccountDTO.recycleAccount"></el-input>
          </el-form-item>
          <el-form-item label="回收员评分">
            <el-input v-model="recycle.recycleStore"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="recycle.recycleAccountDTO.addTime"></el-input>
          </el-form-item>
          <el-form-item label="操作人">
            <el-input v-model="recycle.recycleAccountDTO.operator"></el-input>
          </el-form-item>
          <el-form-item label="入驻站点">
            <el-input v-model="recycle.siteName"></el-input>
          </el-form-item>
          <el-form-item label="入驻地址">
            <el-input v-model="recycle.siteAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item></el-form-item>
          <el-form-item label="回收员头像">
            <el-image style="width: 200px; height: 150px"  :src="recycle.recycleHeader"  :fit="fit"></el-image>
          </el-form-item>
          <el-form-item label="回收员姓名">
            <el-input v-model="recycle.recycleName"></el-input>
          </el-form-item>
          <el-form-item label="回收员电话">
            <el-input v-model="recycle.recyclePhone"></el-input>
          </el-form-item>
          <el-form-item label="回收员年龄">
            <el-input v-model="recycle.recycleAge"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <!-- 修改回收员信息 -->
    <div>
      <el-dialog  title="修改站点信息" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
        <el-form ref="updateRecycle" :model="updateRecycle" label-width="100px">
          <el-form-item label="回收员头像">
            <el-upload
            style="width:200px ;height:138px ;"
              :headers="headers"
              class="avatar-uploader"
              action="http://localhost:9099/site/recycleInfo/upload"
              :show-file-list="false"
               name="file"
              :on-success="logoSuccess"
              :before-upload="logoUpload">
              <img v-if="recycleHeader" :src="recycleHeader" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="回收员姓名">
            <el-input v-model="updateRecycle.recycleName"></el-input>
          </el-form-item>
          <el-form-item label="回收员电话">
            <el-input v-model="updateRecycle.recyclePhone"></el-input>
          </el-form-item>
          <el-form-item label="回收员年龄">
            <el-input v-model="updateRecycle.recycleAge"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RecycleInfo",
    data() {
      return {
        fit: 'fill',
        dialogVisible1:false,
        dialogVisible:false,
        pass:{
          oldPass:'',
          notarizePass:'',
          newPass:''
        },
        updateRecycle:{
          recycleHeader:'',
          recycleName:'',
          recyclePhone:'',
          recycleAge:''
        },
        recycleHeader:'',
        headers: {
          ecologyToken: localStorage.getItem("ecologyToken")
        },
        recycle: {
          recycleAccountDTO: {}
        }
      }
    },
    methods: {

      //上传头像回调函数
      logoSuccess(res, file){
        this.recycleHeader = file.response.data;
      },

      // 回收员头像上传
      logoUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        // return isJPG && isLt2M;
        return  isLt2M;
      },

      //密码确定按钮
      passConfirm(){
        var notarizePass = this.pass.notarizePass
        var newPass = this.pass.newPass
        if(newPass==''||newPass==null){
          alert("新密码不为空")
        }else if(notarizePass==''||notarizePass==null){
          alert("确认密码不为空")
        }else if(notarizePass!=newPass){
          alert("新密码与确认密码不一致")
        } else{
          this.$http.post("/site/recycleAccount/updatePass.recycle",{
            newPass:this.pass.newPass,
            oldPass:this.pass.oldPass
          }).then(resp=>{
            if(resp.data.code==200){
              alert(resp.data.message)
              this.dialogVisible1 = false
              this.$http.post("/site/recycleAccount/logout.recycle").then(resp=>{
                localStorage.removeItem("ecologyToken")
                localStorage.removeItem("siteAccountMessage")
                this.$router.push("/index")
              })
            }else{
              alert(resp.data.message)
            }
          })
        }
      },

      //密码取消按钮
      passCancel(){
        this.pass.oldPass=''
        this.pass.notarizePass=''
        this.pass.newPass=''
        this.dialogVisible1 = false
      },

      //修改密码
      updatePass() {
        this.dialogVisible1 = true
      },

      //确定按钮
      confirm(){
        this.updateRecycle.recycleHeader=this.recycleHeader
        this.$http.post("/site/recycleInfo/update.recycle",this.updateRecycle).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.recycleHeader=''
            this.updateRecycle.recycleHeader =''
            this.updateRecycle.recycleName =''
            this.updateRecycle.recycleAge = ''
            this.updateRecycle.recyclePhone = ''
            this.showRecycle()
            this.dialogVisible = false
          }else{
            alert(resp.data.message)
          }
        })
      },

      //取消按钮
      cancel(){
        if(this.recycleHeader!=this.updateRecycle.recycleHeader){
          this.$http.post("/site/recycleInfo/del",{recycleHeader:this.recycleHeader}).then(resp=>{
          })
        }
        this.recycleHeader=''
        this.updateRecycle.recycleHeader =''
        this.updateRecycle.recycleName =''
        this.updateRecycle.recycleAge = ''
        this.updateRecycle.recyclePhone = ''
        this.showRecycle()
        this.dialogVisible = false
      },

      // 修改按钮
      updateBtn(recycle) {
        this.updateRecycle.recycleName = recycle.recycleName
        this.updateRecycle.recycleAge = recycle.recycleAge
        this.updateRecycle.recyclePhone = recycle.recyclePhone
        this.updateRecycle.recycleHeader = recycle.recycleHeader
        this.recycleHeader = recycle.recycleHeader
        let form = this.updateRecycle
        // 深拷贝处理
        let str=JSON.stringify(form)
        let updateForm=JSON.parse(str)
        this.dialogVisible = true
      },

      //关闭弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      // 显示回收员信息
      showRecycle() {
        this.$http.post("/site/recycleInfo/select.recycle").then(resp => {
          this.recycle = resp.data.data
        })
      }
    },
    created() {
      this.showRecycle()
    }

  }
</script>

<style>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 208px;
      height: 138px;
      line-height: 138px;
      text-align: center;
    }
    .avatar {
      width: 148px;
      height: 148px;
      display: block;
    }
</style>
